<template>
  <div class="notice" @click="toMessage">
    <div class="notice__left">
        <img src="@/assets/images/ngg.png" />
    </div>
    <div class="line"></div>
    <div class="notice__right">
      <div class="notice__h3">公告标题信息</div>
      <div class="notice__desc">公告内容公告内容公告内容公告内容公告内容</div>
    </div>
  </div>
</template>
<script setup>
import { useRouter } from "vue-router";
const router = useRouter();
const toMessage = () => {
  router.push({
    path: "/message",
  })
}
</script>
<style lang="scss" scoped>
.notice {
  display: flex;
  height: 60px;
  align-items: center;
  background: #EBFFFB;
border-radius: 4px;
  &__left{
    width: 64px;
    display: flex;
    justify-content: center;
    img{
        width: 39px;
        height: 39px;
    }
  }
  .line {
    width: 1px;
    height: 20px;
    background-color: #e0e0e0;
  }
  &__right {
    padding: 0 8px;
    flex: 1;
    overflow: hidden;
  }
  &__h3 {
    font-family: PingFangSC-Medium;
    font-size: 14px;
    color: #000000;
  }
  &__desc {
    font-family: PingFangSC-Regular;
    font-size: 12px;
    color: #999999;
  }
}
</style>